<template>
  <div class="p-2">
    <ma-crud ref="crudRef" :columns="columns" :options="crud">
      <template #search-dictName="{ searchForm, component }">
        <a-input
          v-model.trim="searchForm[component.dataIndex]"
          :style="{ width: '240px' }"
          allow-clear
          placeholder="请输入字典名称"
        >
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #dictType="{ record }">
        <a-link @click="handleData(record)">{{ record.dictType }}</a-link>
      </template>
      <template #tableAfterButtons>
        <a-button @click="handleRefreshCache" :loading="refreshLoading">刷新缓存</a-button>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-link @click="handleData(record)">字典配置</a-link>
      </template>
    </ma-crud>
    <data-table-form ref="dataTableRef" />
  </div>
</template>

<script lang="ts" name="Dict" setup>
import { DictTypeVO } from "@/api/system/dict/type/types";
import { addType, delType, listType, refreshCache, updateType } from "@/api/system/dict/type";
import { Message } from "@arco-design/web-vue";
import useDictStore from "@/store/modules/dict";
import DataTableForm from "@/views/system/dict/components/data-table-form.vue";

const dataTableRef = ref<ArcoFormInstance>();
const refreshLoading = ref(false);

const crud = reactive({
  id: "dictId",
  pk: "dictId",
  title: "字典查询",
  formLayout: "vertical",
  formOption: {
    width: 600,
    layout: [
      {
        formType: "grid",
        gutter: 16,
        cols: [
          { span: 12, formList: [{ dataIndex: "dictName" }] },
          { span: 12, formList: [{ dataIndex: "dictType" }] },
          { span: 24, formList: [{ dataIndex: "remark" }] }
        ]
      }
    ]
  },
  api: listType,
  showIndex: true,
  operationColumn: true,
  operationColumnAlign: "center",
  operationColumnWidth: 200,
  pageLayout: "normal",
  requestParams: { orderBy: "createTime", orderType: "desc" },
  add: { api: addType, auth: ["system:dict:add"], text: "新增", show: true },
  edit: { api: updateType, auth: ["system:dict:edit"], text: "编辑", show: true },
  delete: { api: delType, auth: ["system:dict:delete"], text: "删除", show: true }
});

const columns = reactive([
  {
    title: "字典编号",
    dataIndex: "dictId",
    align: "center",
    hide: true
  },
  {
    title: "字典名称",
    dataIndex: "dictName",
    align: "center",
    search: true,
    commonRules: {
      required: true,
      message: "字典名称不能为空"
    }
  },
  {
    title: "字典编码",
    dataIndex: "dictType",
    align: "center",
    commonRules: {
      required: true,
      message: "字典类型不能为空"
    }
  },
  {
    title: "描述",
    dataIndex: "remark",
    align: "center",
    formType: "textarea",
    autoSize: { minRows: 3, maxRows: 6 },
    maxLength: 200,
    showWordLimit: true
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    addDisplay: false,
    editDisplay: false
  }
]);

/** 刷新缓存按钮操作 */
const handleRefreshCache = async () => {
  refreshLoading.value = true;
  try {
    await refreshCache();
    Message.success("刷新成功");
    useDictStore().cleanDict();
  } finally {
    refreshLoading.value = false;
  }
};

const handleData = async (row?: DictTypeVO) => {
  dataTableRef.value.show(row?.dictType);
};
</script>
